<lv-timeline class="custom" lvMode="tiled">
  <ng-container *ngFor="let item of data; let i = index">
    <lv-timeline-item [lvTime]="item.time" *ngIf="item.type !== 'error'" [lvDot]="customTel">
      <div class="custom-container">
        <p class="custom-title">{{ item.title }}</p>
        <div class="custom-content">
          <p class="custom-des">{{ item.content.des }}</p>
          <p *ngIf="item.content.link" class="custom-link">
            链接：
            <a>{{ item.content.link }}</a>
          </p>
          <p *ngFor="let status of item.content.status" class="custom-status">
            <i lv-icon="lv-icon-status-succeed"></i>
            <span>{{ status.des }}</span>
          </p>
        </div>
      </div>
    </lv-timeline-item>
    <lv-timeline-item [lvTime]="item.time" *ngIf="item.type === 'error'" [lvDot]="errorTel" class="custom-error-timeline">
      <div class="custom-container">
        <p class="custom-title">{{ item.title }}</p>
        <div class="custom-content custom-content-error">
          <p class="custom-des">{{ item.content.des }}</p>
          <p *ngFor="let status of item.content.status" class="custom-status">
            <i *ngIf="status.pass" lv-icon="lv-icon-status-succeed"></i>
            <i *ngIf="!status.pass" lv-icon="lv-icon-status-error"></i>
            <span [ngStyle]="{ color: !status.pass ? '#f27272' : '#808080' }">{{ status.des }}</span>
          </p>
        </div>
      </div>
    </lv-timeline-item>
  </ng-container>
</lv-timeline>

<ng-template #customTel>
  <span class="custom-dot"></span>
</ng-template>
<ng-template #errorTel>
  <span class="custom-dot custom-dot-error"></span>
</ng-template>
